<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="but"> 添加超链接</button>
		<ul id="ul">
			<li><a href="javascript:;"class="a">超链接一</a></li>
			<li><a href="javascript:;"class="a">超链接二</a></li>
			<li><a href="javascript:;"class="a">超链接三</a></li>
		</ul>
		<script type="text/javascript">
			var allA = document.getElementsByTagName("a");
			var but = document.getElementById("but");
			var ul = document.getElementById("ul");
			but.onclick = function(){
				// var al = document.createElement("a");
				// al.href = "javascript:;";
				var i = allA.length+1;
				var li =document.createElement("li");
				li.innerHTML = "<a href='javascript:;'>超链接"+i+"</a>";
				i++;
				ul.appendChild(li);
			}
			ul.onclick = function(){
				if(event.target.className == "a"){
					alert("我是ul的单击相应函数");
				}
			}
			/*
				事件的委派
					-指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
						从而通过祖先元素的相应函数来处理事件
					-事件的委派时利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能
				target
					-event中的target表示的触发事件对象
					
				
			*/
		</script>
	</body>
</html>
